<template>
    <div class="hosiptal">
        <div class="header">
            <div><i class="iconfont icon-jiaose"></i> 上海市</div>
            <div>医疗救治定点医院及发热门诊一览</div>
        </div>

        <!-- 医院展示区 -->
        <div class="content" style="margin-top:160px">
            <div style="width:150px">
                <el-input
                    placeholder="请输入医院名称"
                    v-model="input"
                    clearable>
                </el-input>    
            </div>
            <div>
               <el-row v-for="(item,index) in tableData" :key='item.id'>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="left">
                                <div>
                                    <span style="border-radius:50%;background-color:white;display:inline-block;width:20px;height:20px;line-height:20px;margin-right:5px;text-align:center;">{{index+1}}</span>
                                    <span>{{item.name}}</span>
                                </div>
                                <div style="overflow:hidden">
                                    <span style="background-color: #ffb34e;border-radius:3px;padding:0 5px;line-height:20px;font-size:14px;color:white;float:left">{{item.flags}}</span>
                                </div>
                                <div style="color: #999;font-size:14px;">{{item.province}} {{item.city}} {{item.area}}</div>
                            </div>
                            <div class="right">
                                <div><i class='iconfont icon-map' style="font-size:30px"></i></div>
                                <div>2113.5km</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import axios from '@/http/axios'
export default {
    data(){
        return {
            input:'',
            tableData:[],
            params:{
                page:1,
                pageSize:10
            }
        }
    },
    created(){
        this.query_hospital()
    },
    methods:{
        query_hospital(){
            axios({
                url:'http://121.199.29.84:8001/hospital/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 分页的总条数
                // this.total = res.data.data.total;
                // 表格数据
                this.tableData = res.data.data.list
            })
        },
    }
}
</script>

<style scoped>
    .icon-jiaose {
        font-size:20px;
    }
    .left {
        float: left;
        height: 90px;
    }
    .left div {
        line-height: 30px;
    }
    .right {
        float: right;
        height: 90px;
    }
    .right div {
        line-height:45px;
    }
    .header {
        font-size:20px;
        color:white;
        font-weight:700;
        padding: 50px;

        height: 150px;
        background-image: url('http://121.199.29.84/visual/static/img/bg1.efce26ef.png');
        position: absolute;
        top: 0;
        left:0;
        right:0;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #f8f8f8;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 90px;
        padding:0 10px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>